<div id="pm_settings">
    <div class="settings settingsDashboard-container">
        <div class="row">
            <section class="pm_form">
                <div class="pm_grid flex flex-row">
                    <div class="col-1-2 pm-flex-content">
                        <header-block class="settingsDashboard-header-overview">
                            <h2
                                class="settingsDashboard-title-overview"
                                translate
                                translate-context="Title">Overview</h2>
                        </header-block>
                        <section class="settingsDashboard-overview-section-table-container">
                            <overview-section></overview-section>
                        </section>
                    </div>
                    <div class="settingsDashboard-subscription-section col-1-2" ng-if="isPaidUser">
                        <header-block class="settingsDashboard-header-subscription">
                            <h2
                                class="settingsDashboard-title-subscription"
                                translate
                                translate-context="Title">My subscription</h2>
                        </header-block>
                        <section class="settingsDashboard-subscription-section-table-container">
                            <subscription-section methods="methods"></subscription-section>
                        </section>
                    </div>
                    <div class="col-1-2 donate pm-flex-content" ng-if="!isPaidUser">
                        <header-block class="settingsDashboard-header-donate">
                            <h2
                                class="settingsDashboard-title-donate"
                                translate
                                translate-context="Title">Donate</h2>
                        </header-block>
                        <div class="well pm-flex-content-fillHeight text-center">
                            <p translate-context="dashboard, donation informations" translate>Upgrading to a paid account is the best way to support ProtonMail, but you can also donate any amount.</p>
                            <p><strong translate-context="dashboard, donation informations" translate>Your donation helps us support more users and continue to develop ProtonMail as free and open source software.</strong></p>
                            <p>
                                <donate-btn class="pm_button primary settingsDashboard-btn-donation"></donate-btn>
                            </p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="row">
            <section class="settingsDashboard-plans-section setting pm_form full" id="plans">
                <moz-info></moz-info>
                <header-block class="settingsDashboard-header-plans">
                    <h2
                        class="settingsDashboard-title-plans"
                        translate
                        translate-context="Title">Plans and prices</h2>
                </header-block>
                <section class="settingsDashboard-plans-subheader">
                    <vpn-discount-panel></vpn-discount-panel>
                    <div class="settingsDashboard-plans-devise-discount">
                        <div class="settingsDashboard-plans-devise">
                            <div class="settingsDashboard-plans-devise-label">
                                <label translate-context="label" translate>Currency</label>
                                <a class="settingsDashboard-plans-devise-label-link text-purple" href="https://protonmail.com/support/knowledge-base/changing-the-currency/" target="_blank">
                                    <i class="fa fa-info-circle"></i>
                                </a>
                            </div>
                            <dashboard-currency-selector></dashboard-currency-selector>
                        </div>
                    </div>
                </section>
                <div class="settingsDashboard-arrowToScroll" arrows-to-scroll>
                    <div class="settingsDashboard-plans" active-plan>
                        <free-column></free-column>
                        <plus-column></plus-column>
                        <professional-column></professional-column>
                        <visionary-column><visionary-column>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
